<template>
  <div class="h w totalBox">
    <div class="w header">
      <a-input-search v-model="searchCont" placeholder="请输入关键字" style="width: 200px" @search="onSearch" @change="seaChange" />
    </div>
    <div class="w content">
      <div class="h w table">
        <a-table
        :columns="columns"
        :data-source="data"
        :pagination="{ pageSize: 11 }"
        >
          <span slot="aclicencePlate" slot-scope="text, record" v-html="record.licencePlate">{{record.licencePlate}}</span>
          <span slot="acTime" slot-scope="text, record" v-html="record.time">{{record.time}}</span>
          <span slot="acid" slot-scope="text, record" v-html="record.deviceId">{{record.deviceId}}</span>
          <span slot="action" slot-scope="text, record">
            <a-tooltip placement="right" title="单击放大" class="toolTip">
              <div class="images" v-viewer.static="{inline: false}">
                <img class="h w" :src="record.imgData" :key="record.imgData">
              </div>
            </a-tooltip>
          </span>
        </a-table>
      </div>
    </div>
  </div>
</template>
<script>
import { request } from '../network/axios.js'
const columns = [
  {
    title: '车牌号',
    scopedSlots: { customRender: 'aclicencePlate' },
    width: '100px'
  },
  {
    title: '时间',
    scopedSlots: { customRender: 'acTime' }
  },
  {
    title: '设备',
    scopedSlots: { customRender: 'acid' }
  },
  {
    title: '详情',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  data () {
    return {
      data: [],
      searchData: [],
      allData: [],
      columns,
      searchCont: '',
      viewer: null
    }
  },
  mounted () {
    let vm = this
    vm.getCamData()
  },
  methods: {
    // 向table表格中渲染数据
    getTableData (data) {
      this.data.splice(0, this.data.length) // 清空原数组
      data.forEach(r => {
        this.data.push({
          key: r.id,
          imgData: r.imgData,
          licencePlate: r.licencePlate,
          deviceId: r.deviceId,
          time: r.time
        })
        // console.log(this.data, '转换过后')
      })
    },
    // 搜索框输入字符发生变化时,调用搜索函数
    seaChange () {
      this.getTableData(this.allData)
      let searchCont = this.searchCont
      this.onSearch(searchCont)
    },
    // 搜索框搜索功能
    onSearch (value) {
      let vm = this
      value = value.trim()
      let temData = JSON.parse(JSON.stringify(vm.allData))// 深拷贝,防止改变allData的值
      vm.searchData = temData.filter(item =>
        (String(item.deviceId).includes(value) ||
        String(item.licencePlate).includes(value) ||
        String(item.time).includes(value)))
      // 字符串替换,含搜索词汇的字符串高亮
      let replaceReg = new RegExp(value, 'g')
      let replaceString = '<span style="color: red; margin-left: 0px">' + value + '</span>'
      let arr = vm.searchData
      for (let i = 0; i < arr.length; i++) {
        arr[i].licencePlate = String(arr[i].licencePlate).replace(replaceReg, replaceString)
        arr[i].deviceId = String(arr[i].deviceId).replace(replaceReg, replaceString)
        arr[i].time = String(arr[i].time).replace(replaceReg, replaceString)
      }
      vm.searchData = arr
      console.log(' vm.searchData', vm.searchData)
      // 重新push 替换字符串后的代码
      this.getTableData(vm.searchData)
    },
    // 请求违章信息
    getCamData () {
      let vm = this
      request({
        url: '/api/v1/records',
        method: 'get'
      }).then(res => {
        console.log('res.data', res.data)
        console.log(typeof (res.data[0].imgData), '请求结果')
        if (res.code === 200) {
          for (let i = 0; i < res.data.length; i++) {
            res.data[i].time = vm.getTime(res.data[i].time)
            res.data[i].imgData = 'data:image/jpeg;base64,' + res.data[i].imgData
            console.log(res.data[i].time, 'res.data[i].time')
          }
          vm.allData = res.data
          this.getTableData(res.data)
        } else {
          return vm.$notification.open({
            duration: 7,
            placement: 'topLeft',
            top: '150px',
            message: '数据请求失败,请重试!'
          })
        }
      })
    },
    getTime (time) {
      time = time * 1000
      console.log('time', time)
      const t = new Date(time)
      const y = t.getFullYear()
      let m = t.getMonth() + 1
      if (m < 10) { m = '0' + m }
      let d = t.getDate()
      if (d < 10) { d = '0' + d }
      let h = t.getHours()
      if (h < 10) { h = '0' + h }
      let min = t.getUTCMinutes()
      if (min < 10) { min = '0' + min }
      let s = t.getSeconds()
      if (s < 10) { s = '0' + s }
      const Time = y + '-' + m + '-' + d + ' ' + h + ':' + min + ':' + s
      console.log('this.time', Time)
      return Time
    }
  }
}
</script>
<style>
.totalBox {
  overflow: hidden;
}
.header {
  display: flex;
  align-items: center;
  padding: 0 0 0 30px;
  height: 7%;
  border-bottom: 1px solid rgba(255, 255, 255, .7);
}
.images {
  display: inline-block;
  height: 20px;
  width: 20px;
  cursor: pointer;
}
/* 搜索框组件样式修改 */
.ant-input-search-icon:hover {
  color: rgb(13, 214, 13);
}
.content {
  position: relative;
  height: 90%;
  padding: 20px 25px 25px 25px;
}
.content .table {
  border: 1px solid rgba(255, 255, 255, .7);
}
/* 表格组件样式修改 */
.ant-table-wrapper,
.ant-table-thead tr th,
.ant-table-tbody tr td,
.ant-input-affix-wrapper .ant-input,
.ant-input-search-icon,
.ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td,
.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis,
.totalBox {
  background-color: #121F3F;
  color: #fff;
}
.ant-table-tbody tr td,
.ant-table-thead tr th {
  width: 200px;
}
.ant-table-placeholder {
  background: #121F3F;
  border: 0px none;
}
.ant-empty-normal .ant-empty-image {
  display: none;
}
.ant-empty-description {
  color: #fff;
  font-size: 30px;
}
.ant-pagination-item-link .anticon {
  background: #fff;
  color: black;
}
.ant-table-tbody tr td,
.ant-table-thead tr th {
  border: 1px rgba(255, 255, 255, .3);
  border-style: none none solid none;
}
.toolTip {
  position: relative;
}
/* 表格数据第一列右移 */
.ant-table-thead > tr > th .ant-table-header-column,
.ant-table-tbody tr td span:first-child {
  margin-left: 70px;
}
/* v-viewer 图片插件去掉上一张和下一张按钮 */
.viewer-next,
.viewer-prev {
  display: none;
}
</style>
